<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<link href="#springUrl('/static/css/bootstrap.min.css')" rel="stylesheet">
	<link href="#springUrl('/static/css/style.css')" rel="stylesheet">
    <link href="#springUrl('/static/css/jquery-ui.css')" rel="stylesheet">
</head>
<body class="white-bg">
<div class="ibox-content" style="width: 100%;">
   <form id="myForm" class="form-horizontal" autocomplete="off" data-validator-option="{theme:'default'}">
       <input type="hidden" id="feedbackId" name="fid" value="$!{theme.id}" >
       <input type="hidden" id="imgAddr" name="imgAddr" value="$!{theme.imgAddr}" >
       <div class="form-group"><label class="col-sm-4 control-label">历史消息：</label>
           <!--<img src="$$theme.imgAddr" style="display:block;width:100%;height:100%">-->
      		<div class="col-sm-8" id="historyMessage">
                用户回复：<label style="color: #0e9aef" >$!{theme.content}</label>
                #if($theme.imgAddr)
                <a class="btn" style="color: #0e9aef" onclick="showImage($('#feedbackId').val())">图片</a>
                #else
                #end
                <br/>
                #foreach($feedback in $!{feedbacks})
                #if($!{feedback.from}>=1)
                用户回复：<label style="color: #0e9aef" >$!{feedback.content}</label>
                    #if($feedback.imgAddr)
                    <a class="btn" style="color: #0e9aef" onclick="showImage(${feedback.id})">图片</a>
                    #else
                    #end
                <br/>
                #else
                客服回复：<label style="color: #00B83F" >$!{feedback.content}</label>
                    #if($feedback.imgAddr)
                    <a class="btn" style="color: #00B83F" onclick="showImage(${feedback.id})">图片</a>
                    #else
                    #end
                <br/>
                #end
                #end
      		</div>
       </div>
        <!--<div class="form-group"><label class="col-sm-4 control-label">图标</label>
            <div class="col-sm-8">

            </div>
        </div>-->
       <!--<div class="form-group"><label class="col-sm-4 control-label">反馈图片</label>
           <div class="col-sm-8">
               <a class="btn" onclick="showImage($('#feedbackId').val())">查看图片</a>
           </div>
       </div>-->
       <div class="form-group"><label class="col-sm-4 control-label">解决方案：</label>
           <div class="col-sm-8">
                <textarea class="form-control text-left" id="content" name="content" style="background-color:transparent;width:660px;height: 130px"></textarea>
           </div>
       </div>

        <div class="form-group">
            <div class="text-right">
                <button class="btn btn-primary" onclick="serviceReply()" type="button">回复</button>
            </div>
        </div>
    </form>
</div>
<script src="#springUrl('/static/js/jquery-2.1.1.js')"></script>
<script src="#springUrl('/static/plugins/nice-validator-0.8.1/jquery.validator.js?local=zh-CN')"></script>
<script src="#springUrl('/static/js/jquery-ui.custom.min.js')"></script>
<script src="#springUrl('/static/js/jquery-ui-1.10.4.min.js')"></script>
<script src="#springUrl('/static/plugins/layer-v2.2/layer/layer.js')"></script>
<script type="text/javascript">

    var Request = {
        QueryString : function(val) {
            var uri = window.location.search;
            var re = new RegExp("" +val+ "=([^&?]*)", "ig");
            return ((uri.match(re))?(uri.match(re)[0].substr(val.length+1)):"");
        }
    }
/*var feedbackId = Request.QueryString("feedbackId");
    $("#feedbackId").val(feedbackId);*/

    function showImage(feedbackId){
        var title = "图片详情"
        var url = "#springUrl('/service/showimage')?feedbackId="+feedbackId;
        layer.open({
            type: 2,
            title: title,
            shadeClose: false,
            shade: 0.8,
            area: ['500px', '400px'],
            fix: false,
            maxmin: true,
            content: url
        });
    }

$("#myForm").validator({
    valid: function(form){
        var me = this;
        // 提交表单之前，hold住表单，防止重复提交
        var val = $("#content").val();
        var str = '我的回复：<label style="color: #00B83F" >'+val+'</label><br/>'
        $("#historyMessage").append(str);
        me.holdSubmit();
        $.ajax({
        	url: "#springUrl('/service/servicereply')",
            data: $(form).serialize(),
            type: "POST",
            dataType:'text',
            success: function(data){
                if(data=='false'){
                    layer.confirm('回复失败!',{btn:['确定']},function(){layer.closeAll();});
                }else{
                    $("#content").val("");
                }
            }
        });
    }
});

    function serviceReply(){
        var val = $("#content").val();
        var str = '我的回复：<label style="color: #00B83F" >'+val+'</label><br/>'
        $("#historyMessage").append(str);
        $.ajax({
            url: "#springUrl('/service/servicereply')",
            data: $("#myForm").serialize(),
            type: "POST",
            dataType:'text',
            success: function(data){
                if(data=='false'){
                    layer.confirm('回复失败!',{btn:['确定']},function(){layer.closeAll();});
                }else{
                    $("#content").val("");
                }
            }
        });
    }

</script>

</body>
</html>
